<template>
  <div>
    <swiper :options="swiperOption" class="swiper-container" ref="swiper">
      <swiper-slide>
        <div class="page1">
          <div class="content-box info-box">
            <h3>Personal Information</h3>
            <div class="info">
              <p>Name : Boyd Tang</p>
              <p>Tel : 152-1949-6726</p>
              <p>
                E-mail :
                <a href="http://mail.163.com">tangboyd@163.com</a>
              </p>
              <p>
                gitee :
                <a href="http://gitee.com/tangboyd">http://gitee.com/tangboyd</a>
              </p>
            </div>
          </div>
          <div class="content-box education-box">
            <h3>Education background</h3>
            <div class="education">
              <div class="school">
                <span>2010-2014</span>
                <span>SCAU</span>
                <span>Bachelor</span>
                <sup>211</sup>
              </div>
              <div class="school">
                <span>2014-2016</span>
                <span>CAU</span>
                <span>Master</span>
                <sup>Double First-rate</sup>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="page2">
          <div class="content-box">
            <h3>Skills</h3>
            <div class="charts-box">
              <div id="my-echarts" style="width: 350px; height:380px;"></div>
            </div>
          </div>
          <div class="content-box">
            <span>CET-6</span>
            <span>PS</span>
            <span>PPT</span>
            <span>Word</span>
            <span>Excel</span>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="page3">
          <div class="content-box">
            <h3>Work Experience</h3>
            <div class="job-box">
              <h4>ParknShop(H.K.)</h4>
              <p>2016.11-2018.11</p>
              <p>QA department</p>
            </div>
          </div>
          <div class="content-box">
            <h3>Job Intention</h3>
            <div>Looking for a job in Web Developement</div>
            <i>e-mail: tangboyd@163.com</i>
          </div>
          <div class="content-box">
            <h3>Other Projects</h3>
            <div class="qrBox">
              <!-- <div class="imgBox">
                <img src="" alt="">
                <p>swiper/rem</p>
              </div> -->
              <div class="imgBox">
                <img
                  src="../../../static/images/responsiveWeb.png"
                  alt="http://tangboyd.gitee.io/responsivewebdemo"
                >
                <p>bootstrap</p>
              </div>
              <!-- <div class="imgBox">
                <img
                  src=""
                  alt=""
                >
                <p>swiper/100%</p>
              </div> -->
            </div>
          </div>
        </div>
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination">
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
      </div>
    </swiper>

    <div class="button" v-show="buttonFlag">
      <span class="mui-icon-extra mui-icon-extra-arrowleftcricle" @click="back"></span>
      <span class="mui-icon-extra mui-icon-extra-top" @click="backToTop"></span>
    </div>
    <!-- <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide page1">
          <div class="content-box info-box animated">
            <h3>Personal Information</h3>
            <div class="info">
              <p>Name : boyd</p>
              <p>Tel : 152 xxxx 6726</p>
              <p>
                E-mail :
                <a href="http://mail.163.com">tangboyd@163.com</a>
              </p>
              <p>
                gitee :
                <a href="http://gitee.com/tangboyd">http://gitee.com/tangboyd</a>
              </p>
            </div>
          </div>
          <div class="content-box education-box">
            <h3>Education background</h3>
            <div class="education">
              <div class="school">
                <span>2010-2014</span>
                <span>SCAU</span>
                <span>Bachelor</span>
                <sup>211</sup>
              </div>
              <div class="school">
                <span>2014-2016</span>
                <span>CAU</span>
                <span>Master</span>
                <sup>Double First-rate</sup>
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide page2">
          <div class="content-box">
            <h3>Skills</h3>
            <div class="charts-box">
              <div id="my-echarts" style="width: 350px; height:380px;"></div>
            </div>
          </div>
          <div class="content-box">
            <span>CET-6</span>
            <span>PPT</span>
            <span>Word</span>
            <span>Excel</span>
          </div>
        </div>

        <div class="swiper-slide page3">
          <div class="content-box">
            <h3>Work Experience</h3>
            <div class="job-box">
              <h4>ParknShop(H.K.)</h4>
              <p>2016.11-2018.11</p>
              <p>QA department</p>
            </div>
          </div>
          <div class="content-box">
            <h3>Job Intention</h3>
            <div>Looking for a job in Web Developement</div>
            <i>e-mail: tangboyd@163.com</i>
          </div>
          <div class="content-box">
            <h3>Other Projects</h3>
            <div class="qrBox">
              <div class="imgBox">
                <img src="../../../static/images/meeting.png" alt="http://tangboyd.gitee.io/h5demo">
                <p>swiper/zepto</p>
                </div>
              <div class="imgBox">
                <img src="../../../static/images/responsiveWeb.png" alt="http://tangboyd.gitee.io/responsivewebdemo">
                <p>bootstrap</p>
                </div>
              <div class="imgBox">
                <img src="../../../static/images/dts.png" alt="http://tangboyd.gitee.io/demo_h5_dts">
                <p>webpack/swiper</p>
                </div>
            </div>
          </div>
    </div>-->

    <!-- </div> -->
    <!-- 如果需要分页器 -->
    <!-- 分页器的点需要加span设置，引入 swiper-pagination-bullets 对应的类名 -->
    <!-- <div class="swiper-pagination swiper-pagination-bullets">
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
        <span class="swiper-pagination-bullet"></span>
      </div>
    </div>-->
  </div>
</template>

<script>
// swiper分页器初始化还需引入css样式
// import "swiper/dist/css/swiper.min.css";
// import Swiper from "../../../lib/swiper/js/swiper.min.js";

/*vue-awesome-swiper 替换swiper，测试在手机端swiperw无效的问题 */
/*组件方式引用--引入css--import组件---挂载组件--初始化数据*/
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";

import echarts from "echarts";

export default {
  data() {
    return {
      title: "Resume",
      option: {
        dataset: {
          // 数据，第一行可以不设置
          source: [
            ["score", "degree", "skill"],
            [30, 3.0, "React"],
            [50, 5.0, "PHP"],
            [50, 5.0, "nodejs"],
            [70, 7.0, "mint-ui"],
            [75, 7.5, "VUE"],
            [80, 8, "JavaScript"],
            [80, 8, "CSS"],
            [80, 8, "HTML"]

            // [68.1, 91852, "Orange Juice"],
            // [89.3, 101852, "Lemon Juice"],
            // [50.1, 20112, "Walnut Brownie"]
          ]
        },
        // 坐标系区域属性设置
        grid: { containLabel: true },
        // 设置单个坐标轴
        xAxis: { type: "value", max: "10" },
        yAxis: { type: "category" },
        // 颜色设置，根据不同的score数值得到10-100对应的颜色
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 30,
          max: 80,
          // text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          // 色阶范围
          inRange: {
            color: ["#D7DA8B", "#E15457"]
          }
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "degree",
              // Map the "product" column to Y axis
              y: "skill"
            }
          }
        ],
        animation: true,
        animationEasing: 'elasticOut',
      },
      swiperOption: {
        //swiper3
        direction: "vertical",
        // loop: true,
        pagination: {
          el: ".swiper-pagination",
          type: "bullets"
        },
        on: {
          // slideChange用这个还解决了swiper刷新才有效的bug
          slideChange: () => {
            if (this.swiper.activeIndex == 0) {
              this.buttonFlag = false;
            } else {
              this.buttonFlag = true;
            }
          }
        }
      },
      buttonFlag: false
    };
  },
  created() {
    this.showTitle(this.title);
  },
  mounted() {
      this.initEcharts();
    // 数据变化之后立即使用该方法，回调函数在 DOM 更新完成后就会调用 
    // this.$nextTick(() => {});

  },
  methods: {
    initSwiper() {
      var mySwiper = new VueAwesomeSwiper(".swiper-container", {
        direction: "vertical", // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        }
      });
    },
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      //   选择器用的是id
      var myChart = echarts.init(document.getElementById("my-echarts"));

      // 绘制图表
      myChart.setOption(this.option);
    },
    showTitle(title) {
      this.$emit("getTitle", title);
    },
    back() {
      // console.log("111");
      this.$router.push("/home");
    },
    backToTop() {
      this.swiper.slideTo(0, 1500, false);
    },
  },
  computed: {
    swiper() {
      return this.$refs.swiper.swiper;
    }
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.swiper-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 996;
  overflow: hidden;
  .swiper-wrapper {
    .swiper-slide {
      height: 100%;
      .content-box {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 3px 10px #ccc;
        padding: 20px 0px;
        margin: 0px 10px;

        p {
          color: #000;
          font-size: 16px;
        }
      }
    }
    .page1 {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px 0px;
      justify-content: space-between;
      padding-top: 30px;
      padding-bottom: 30px;
      h3 {
        padding: 10px 5px;
        margin-bottom: 20px;
        background: $baseColor;
        color: #fff;
        border-radius: 5px;
      }
      .info-box {
        flex: 49%;
        flex-grow: 0;
        padding: 20px 20px;
        .info {
          background: #eee;
          border-radius: 5px;
          padding: 10px 5px;
        }
      }
      .education-box {
        flex: 49%;
        flex-grow: 0;
        padding: 20px 20px;
        .education {
          line-height: 1;
          .school {
            padding: 10px 5px;
            background: #eee;
            margin: 10px 0;
            border-radius: 5px;
            span {
              margin-right: 5px;
              &:first-of-type {
                font-size: 14px;
              }
            }

            sup {
              color: $baseColor;
            }
          }
        }
      }
    }
    .page2 {
      margin: 5px 0px 10px;
      padding-top: 30px;
      padding-bottom: 30px;
      height: 100%;
      .content-box {
        margin-bottom: 10px;
        h3 {
          margin: 0 20px;
          padding: 10px 5px;
          background: #eee;
          border-radius: 5px;
        }
        .charts-box {
          height: 350px;
          overflow: hidden;
          #my-echarts{
            margin-left: -30px;
          }
        }
        span {
          padding: 10px 5px;
          border: 1px dashed $baseColor;
          border-radius: 5px;
          margin-left: 20px;
          color: $baseColor;
        }
      }
    }
    .page3 {
      padding-top: 20px;
      padding-bottom: 20px;
      height: 100%;
      .content-box {
        padding: 20px 20px;
        margin-bottom: 10px;
        .job-box {
          p:first-of-type {
            color: #929292;
          }
        }
      }
      h3 {
        margin-bottom: 10px;
      }
      .content-box:last-of-type{
        padding: 20px 0px;
        h3{
          padding: 0 20px;
        }
      }
      .qrBox {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .imgBox {
          width: 110px;
          text-align: center;
          img {
            width: 100px;
          }
          p {
            font-size: 12px;
          }
        }
      }
    }
  }
  .swiper-pagination-bullets {
    right: 2px;
  }
}
.button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 998;
  span {
    display: block;
    background: rgba($color: #26a2ff, $alpha: 0.5);
    padding: 5px;
    color: #fff;
    margin-bottom: 5px;
  }
}
</style>


